<template>
	<view class="container" :style="'padding-top: '+(CustomBar+44)+'px'">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{navTitle}}</block>
		</cu-custom>
		<view class="region-cont" :style="[{top: CustomBar+'px'}]">
			<view class="regin-item" @click="checkRegion('visitsFilter')">
				<view :class="visitsFilter!=''?'active':''">
					热度
				</view>
				<view class="">
					<image v-if="visitsFilter && visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!visitsFilter || visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="visitsFilter && visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!visitsFilter || visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
			<view class="regin-item" @click="checkRegion('saleFilter')">
				<view :class="saleFilter!=''?'active':''">
					销量
				</view>
				<view class="">
					<image v-if="saleFilter && saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!saleFilter || saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="saleFilter && saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!saleFilter || saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
		</view>
		<view class="shop-content">
			<view class="item-info news-item" v-for="(item,xindex) in shopList" :key="xindex" :data-id="item.id"
			 :data-industryId="item.industry_id==6" @click="navUrl">
				<view class="has-pro" v-if="item.product_data.length>0">
					<view class="">
						<text>NEW</text>
						<text class="text-cut">{{item.name}}</text>
						<text>{{item.distance}}</text>
					</view>
					<view class="yue-vis" v-if="item.visit_number>0 || item.visit_number>0">
						<text>月售{{item.visit_number}}</text>
						<text>{{item.visit_number}}人喜欢</text>
					</view>
					<view class="tags" v-if="item.tags.length>0">
						<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
					</view>
					<view class="add">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
						<text class="text-cut">{{item.address}}</text>
					</view>
					<view class="product">
						<view class="" v-for="(pro,p) in item.product_data" :key="p">
							<image :src="pro.image+'?x-oss-process=image/resize,m_fill,h_215,w_215'" mode=""></image>
							<text class="text-cut">{{pro.product_name}}</text>
						</view>
					</view>
				</view>
				<view class="no-pro" v-if="item.product_data.length==0">
					<view class="">
						<view class="">
							<view class="">
								<text>NEW</text>
								<text class="text-cut">{{item.name}}</text>
								<text>{{item.distance}}</text>
							</view>
							<view class="tags" v-for="(tag,i) in tags" :key="i">
								<text>{{tag}}</text>
							</view>
						</view>
						<view class="yue-vis" v-if="item.visit_number>0 || item.visit_number>0">
							<text>月售{{item.visit_number}}</text>
							<text>{{item.visit_number}}人喜欢</text>
						</view>
						<view class="add-no">
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
							<text class="text-cut">{{item.address}}</text>
						</view>
					</view>
					<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_214,w_160'" mode=""></image>
				</view>
			</view>
		</view>
		<no-content :showType="'shops'" v-if='noContentShow'></no-content>
		<tui-divider width="60%" :gradual="true" v-if="(noMore || areaType!='') && !noContentShow">没有更多了~</tui-divider>
	</view>
</template>

<script>
	import shopItem from '../component/shopItem.vue'
	import tuiDivider from "../component/divider.vue"
	import noContent from "../component/noContent.vue"
	import uniTag from "../component/uni-tag.vue";
	import tuiIcon from "@/components/thorUI/icon.vue";
	export default {
		name: 'shop-item',
		components: {
			shopItem,
			tuiDivider,
			noContent,
			uniTag,
			tuiIcon
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				page: 1,
				coordinate: {},
				shopList: [],
				is_page: '',
				rencently: '',
				noContentShow: false,
				navTitle: '',
				areaType: '',
				id: '',
				noMore: false,
				colorList: ['success', 'primary', 'warning', 'error'],
				placeholderSrc: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-store.png',
				windowHeight: 0,
				// 筛选
				visitsFilter: '',
				saleFilter: ''
			}
		},
		onLoad(options) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.coordinate = uni.getStorageSync('coordinate')
			if (options.isPage) {
				this.is_page = options.isPage
				this.navTitle = '臻选热门'
				this.getHotShops()
			}
			if (options.rencently) {
				this.rencently = '1'
				this.navTitle = '上新尝鲜'
				this.getNewShops()
			}
		},
		onPageScroll() {
			this.load()
		},
		methods: {
			checkRegion(region) {
				if (!this[region] || this[region] == 1) {
					this[region] = 2
				} else if (this[region] == 2) {
					this[region] = 1
				}
				this.pageCount = ''
				this.noContentShow = false
				this.page = 1
				this.noMore = false
				this.shopList = []
				if (this.is_page) {
					this.getHotShops()
				} else if (this.rencently) {
					this.getNewShops()
				}
			},
			load() {
				uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
					images.forEach((image, index) => {
						if (image.top <= this.windowHeight) {
							this.shopList[image.dataset.index].show = true;
							this.shopList[image.dataset.index].loaded = true
						}
					})
				}).exec()
			},
			imageLoad(e) {
				this.shopList[e.target.dataset.index].loaded = true
			},
			getNewShops() {
				var that = this;
				this.$request({
					url: '/shop/getNewShop',
					data: {
						page: that.page,
						latitude: that.coordinate.latitude,
						longitude: that.coordinate.longitude,
						rencently: that.rencently,
						visit: that.visitsFilter?(that.visitsFilter==1?'visit_desc':'visit_asc'):'',
						consume: that.saleFilter?(that.saleFilter==1?'consume_desc':'consume_asc'):''
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.totalNum == 0) {
								that.noContentShow = true
								return
							}
							res.data.data.data.forEach(item => {
								item.load = false
								item.show = false
								that.shopList.push(item)
							})
							that.page++
							that.pageCount = res.data.data.pageCount
							setTimeout(function() {
								that.load()
							}, 100)
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getHotShops() {
				var that = this;
				this.$request({
					url: '/shop/getRecommendShopOrder',
					data: {
						page: that.page,
						latitude: that.coordinate.latitude,
						longitude: that.coordinate.longitude,
						is_page: that.is_page,
						visit: that.visitsFilter?(that.visitsFilter==1?'visit_desc':'visit_asc'):'',
						consume: that.saleFilter?(that.saleFilter==1?'consume_desc':'consume_asc'):''
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.data.length == 0) {
								that.noContentShow = true
								return
							}
							res.data.data.data.forEach(item => {
								item.load = false
								item.show = false
								that.shopList.push(item)
							})
							that.page++
							that.pageCount = res.data.data.pageCount
							setTimeout(function() {
								that.load()
							}, 100)
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navUrl(e) {
				var isIndusty = e.currentTarget.dataset.industryid
				var id = e.currentTarget.dataset.id
				if (isIndusty) {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
		},
		onReachBottom() {
			if (this.areaType) {
				return
			}
			if (this.page > this.pageCount) {
				this.noMore = true
				return
			}
			if (this.is_page) {
				this.getHotShops()
			} else if (this.rencently) {
				this.getNewShops()
			}
		}
	}
</script>

<style>
	.tags .uni-tag {
		margin-right: 10rpx;
	}

	page,
	.container {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.shop-content {
		width: 100%;
		padding: 20rpx 24upx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
	}

	.no-content {
		/* height: 100rpx; */
		text-align: center;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx
	}

	.no-content image {
		width: 360rpx;
		height: 360rpx;
		margin-bottom: 20rpx;
	}

	.no-content text {
		font-size: 30rpx;
		color: #333;
		line-height: 40rpx;
	}

	.item-info {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		/* padding: 24upx 0; */
		border-bottom: solid 1upx #f2f2f2;
		/* background: #fff; */
	}

	.shop-image {
		width: 200upx;
		height: 160upx;
		margin-right: 24upx;
		border-radius: 8upx;
		position: relative;
	}

	.shop-image .image {
		border-radius: 8upx;
		width: 200upx;
		height: 160upx;
		position: absolute;
	}

	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		max-width: 480rpx;
		justify-content: space-between;
	}

	.name {
		font-size: 30upx;
		color: #333333;
		letter-spacing: 1upx;
		font-weight: bold;
	}

	.tags {
		display: flex;
	}

	.tags uni-tag {
		margin-right: 10rpx;
	}

	.remain {
		display: flex;
		margin-top: 20upx;
		/* justify-content: space-between; */
		align-items: center;
		width: 100%;
	}

	.remain>view:nth-child(1) {
		height: 36upx;
		background-color: #ffffff;
		border-radius: 8upx;
		border: solid 1upx #f8990b;
		text-align: center;
		line-height: 36upx;
		color: #f8990b;
		font-size: 24upx;
		padding: 0 10upx;
		margin-right: 45upx;
	}

	.remain>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.remain>view:nth-child(2) image {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
		border-radius: 100%;
	}

	.remain>view:nth-child(2) text {
		font-size: 24upx;
		color: #f71010;
	}

	.address {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 70rpx;
		align-items: center;
	}

	.address>view:nth-child(1) {
		flex: 1;
		display: flex;
		align-items: center;
		height: 70rpx;
	}

	.address>view:nth-child(1) text {
		color: #333333;
		font-size: 26rpx;
		margin-left: 10rpx;
		max-width: 300rpx;
	}

	.address>view:nth-child(2) {
		font-size: 26rpx;
		color: #333333;
	}

	.desc {
		font-size: 26rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.placeholder {
		opacity: 1;
		transition: opacity 0.4s linear;
	}

	.placeholder.loaded {
		opacity: 0;
	}

	.news-item>view {
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.news-item .has-pro {
		display: flex;
		flex-direction: column;
	}

	.news-item .has-pro>view:nth-child(1) {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 75rpx;
		height: 30rpx;
		background-color: #f34930;
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		text-align: center;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fff;
		font-size: 20rpx;
	}
	
	.news-item .has-pro .yue-vis{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.news-item .has-pro .yue-vis text{
		font-size: 24rpx;color: #666666;
		line-height: 24rpx;
	}
	
	.news-item .has-pro .yue-vis text:nth-child(1){
		padding-right: 10rpx;
	}
	
	.news-item .has-pro .yue-vis text:nth-child(2){
		padding-left: 10rpx;
		border-left: solid 1rpx #efefef;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(2) {
		max-width: 450rpx;
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(3) {
		font-size: 24rpx;
		color: #666666;
	}

	.news-item .has-pro .tags {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.news-item .has-pro .tags text {
		padding: 0 5rpx;
		line-height: 30rpx;
		border-radius: 4rpx;
		border: solid 1rpx #efefef;
		font-size: 20rpx;
		color: #999999;
		margin-right: 15rpx;
	}

	.news-item .has-pro .tags text:nth-child(1) {
		background: rgba(248, 153, 11, .2);
		border: none !important;
		color: #f8990b !important;
	}

	.news-item .has-pro .add {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.news-item .has-pro .add image {
		width: 25rpx;
		height: 23rpx;
		margin-right: 15rpx;
	}

	.news-item .has-pro .add text {
		font-size: 24rpx;
		color: #666666;
		max-width: 550rpx;
	}

	.news-item .has-pro .product {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.news-item .has-pro .product>view {
		width: 215rpx;
		border-radius: 8rpx;
	}

	.news-item .has-pro .product>view image {
		width: 214rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}

	.news-item .has-pro .product>view text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-top: 20rpx;
		max-width: 214rpx;
		display: inline-block;
	}

	.news-item .no-pro {
		display: flex;
		justify-content: space-between;
	}

	.news-item .no-pro>view:nth-child(1) {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 15rpx;
		height: 160rpx;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1) {
		display: flex;
		align-items: center;
	}


	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 75rpx;
		height: 30rpx;
		background-color: #f34930;
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		text-align: center;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(2) {
		max-width: 200rpx;
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(3) {
		font-size: 24rpx;
		color: #666666;
	}
	
	.news-item .no-pro>view:nth-child(1) .yue-vis{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.news-item .no-pro>view:nth-child(1)  .yue-vis text{
		font-size: 24rpx;color: #666666;
		line-height: 24rpx;
	}
	
	.news-item .no-pro>view:nth-child(1)  .yue-vis text:nth-child(1){
		padding-right: 10rpx;
	}
	
	.news-item .no-pro>view:nth-child(1)  .yue-vis text:nth-child(2){
		padding-left: 10rpx;
		border-left: solid 1rpx #efefef;
	}

	.news-item .no-pro>view:nth-child(1) .add-no {
		display: flex;
		align-items: center;
	}

	.news-item .no-pro>view:nth-child(1) .add-no image {
		width: 25rpx;
		height: 23rpx;
		margin-right: 15rpx;
	}

	.news-item .no-pro>view:nth-child(1) .add-no text {
		font-size: 24rpx;
		color: #666666;
		max-width: 370rpx;

	}

	.news-item .no-pro>image {
		width: 214rpx;
		height: 160rpx;
		background-color: #a2a2a2;
		border-radius: 6rpx;
	}


	.region-cont {
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx 8rpx 0 0;
		height: 88rpx;
		justify-content: space-between;
		position: fixed;
		left: 0;
		z-index: 9;
	}

	.regin-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.regin-item .active {
		color: #f34930 !important;
	}

	.regin-item>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.regin-item>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.regin-item>view:nth-child(2) image {
		width: 16rpx;
		height: 8rpx;
	}

	.regin-item>view:nth-child(2) image:nth-child(1) {
		margin-bottom: 8rpx;
	}
</style>
